/*
 * @Author: wsf
 * @Date: 2019-02-20 16:14:18
 * @LastEditors: wsf
 * @LastEditTime: 2019-08-12 10:01:57
 * @Description: 
 */
import { PureComponent } from 'react';
import { isNull, isArrInStr, calcArr, calcField, filterExp, filterTemplate, goToPage, isCheckPer, calcPermissionArr, checkPermission } from "../../utils/helper"
import renderCom, { comArr } from "../../utils/renderCom"

export default class MiChartCard extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {

    }
  }
  renderText = (item) => {
    if (isNull(item)) {
      return null;
    }
    else {
      let { list } = this.props;
      let { text, style } = item;
      text = calcField(text, list);
      return (
        <div style={style} dangerouslySetInnerHTML={{ __html: text }} ></div>
      )
    }
  }
  render() {
    const { getFieldDecorator, getFieldValue, setFieldsValue, validateFields, resetFields } = this.props;
    let { dispatch, fd, formDataKey, formData, defaultFormData, isReset, options } = this.props;
    let { title, total, footer, children = [], avatar, componentStyle, list, dataset_key, refreshing, desc, com_key } = this.props;
    if (!isNull(dataset_key) && list instanceof Array) {
      return null;
    }
    let el = [];
    children.map((item, key) => {
      let { row_layout = 12, style } = item;
      row_layout = row_layout * 100 / 12 + "%";
      let newItem = {};
      let _obj = {};
      let { permission_ctrl: _ctrl, permission_code: _code } = item;
      if (isCheckPer(_ctrl, _code) && calcPermissionArr.indexOf(_ctrl) != -1) {
        let per = checkPermission(_code);
        if (item[_ctrl] === undefined) {
          item[_ctrl] = per;
        }
        else {
          _obj[_ctrl] = per
        }
      }
      for (let i in item) {
        let val = item[i];
        if (calcArr.indexOf(i) != -1) {
          let isTrue = calcField(val, formData);
          if (calcPermissionArr.indexOf(i) !== -1) {
            isTrue = isTrue && (_obj[i] !== false);
          }
          newItem[i] = isTrue;
        }
      }
      if (newItem.visible !== "0" && newItem.visible !== 0 && newItem.visible !== false) {
        let comType = item.component_type;
        if (comArr[comType]) {
          let className = "page-item";
          if (item.new_group == 1) {
            className += " new_group"
          }
          el.push(<div style={{ width: row_layout, ...style }} key={key} className={className}>
            {renderCom(
              {
                dataset_key: this.props.dataset_key,//把dataset_key传给子组件 
                refreshing,
                model: "form",
                ...item,
                ...newItem,
                ...options,
                formData,
                defaultFormData,
                getFieldDecorator,
                getFieldValue,
                setFieldsValue,
                validateFields,
                resetFields,
                isReset,
                dispatch,
                location: this.props.location,
                fd,
                formDataKey,
                setFormData: (value) => {
                  dispatch({
                    type: "form/setFormData",
                    payload: {
                      key: formDataKey,
                      value
                    }
                  })
                },
                com_key: com_key + "-" + key
              })}
          </div>)
        }
      }
    })
    return (
      <div style={{ ...componentStyle }} className="mi-chart-card">
        <div style={{ padding: "10px" }} >
          <div data-flex="dir:left cross:center box:first">
            {
              this.renderText(avatar) ? <div style={{ margin: "0 20px 0 10px" }}>
                {this.renderText(avatar)}
              </div> : <div></div>
            }
            <div>
              <div style={{ color: "#999" }}>
                {this.renderText(title)}
              </div>
              <div style={{ marginTop: "4px" }} data-flex="dir:left cross:bottom main:justify">
                <div>
                  {this.renderText(total)}
                </div>
                <div style={{ fontSize: "16px", color: "rgba(0, 0, 0, 0.45)" }}>
                  {this.renderText(desc)}
                </div>
              </div>
            </div>
          </div>
          <div>
            {el}
          </div>
          {
            this.renderText(footer) ? <div style={{ borderTop: "1px solid #e8e8e8", paddingTop: "9px", marginTop: "8px" }}>
              {this.renderText(footer)}
            </div> : null
          }
        </div>
      </div>
    )

  }
}
/*
var config ={
  "component_type":"mi-chartcard",
  "children":[],//包含的子组件   //每个元素可以设置style 但是组件的style属性只有此组件中才生效
  "title":{//顶部右侧上部 部分
    "text":"",
    "style":{}
  },
  "total":{//顶部右侧下部 部分
    "text":"",
    "style":{}
  },
  "desc":{//total右侧部分 和total一行两端对齐
    "text":"",
    "style":{}
  },
  "footer":{
    "text":"",
    "style":{}
  },
  "avatar":{//顶部左侧部分
    "text":"",
    "style":{}
  }
}
*/